<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin:0;padding:0;}
			body{overflow:hidden;}
		</style>
	</head>
	<body>
		<canvas id="canvas">您好，您正在开启的此浏览器不支持canvas功能！请使用其他高版本浏览器重新加载~</canvas>
	</body>
</html>
<script type="text/javascript">
	var Game = function(){
		this.canvas = document.getElementById("canvas");
		this.context = this.canvas.getContext("2d");
		
		this.fps;
		this.background = new Image();//设置背景
		this.lastFrameTime = 0;	//仅用于fps获取
		
		this.paused = false;
		this.PAUSED_CHECK_INTERVAL = 40;
		
		this.paused = false,
		this.pauseStartTime = 0,
		this.lastAnimationFrameTime = 0;
	}
	Game.prototype = {
		//执行动画
		draw : function(now){
			console.log("---------");
		},
		//动画循环
		animate : function(now){
			var self = this;
			if(!Game.paused){
				Game.fps = Game.getFps(now);
				Game.draw(now);
				requestAnimationFrame(Game.animate);
			}else{
				setTimeout(function(){
					requestAnimationFrame(Game.animate);
				},Game.PAUSED_CHECK_INTERVAL)
			}
		},
		//获取fps
		getFps : function(now){
			var self = this;
			self.fps = 1 / (now-lastFrameTime) *1000;
			lastFrameTime = now;
			return self.fps;
		},
		//开始游戏
		startGame : function(){
			requestAnimationFrame(Game.animate);
		},
		//初始化游戏
		initGame : function(){
			var self = this;
			this.background.src = "../img/bg.jpg";
			background.onload = function(){
				Game.startGame();
			}
		},
		//键盘事件
		turnLeft : function(){
			this.bgVelocity = -this.BACKGROUND_VELOCITY;
		},
		turnLeft : function(){
			this.bgVelocity = this.BACKGROUND_VELOCITY;
		},
		//暂停事件
		togglePaused : function(){
			var now = +new Date();
			
			this.paused = !this.paused;
			if(this.paused){
				this.pauseStartTime = now;
			}else{
				this.lastAnimationFrameTime += (now - this.pauseStartTime);
			}
		},
	}
</script>